<template>
    <div class="course">
        <div class="course-top">
            <div class="top-left">
                <el-image src="https://www.imooc.com/static/img/course/v4/course-title2.png"
                    style="height: 46px; margin-right: 10px;"></el-image>
                <span>海量精品课程</span>
            </div>
            <div>
                <el-input prefix-icon="el-icon-search" placeholder="搜索感兴趣的课程" v-model="searchContent"
                    @keyup.enter.native="search"></el-input>
            </div>
        </div>
        <div class="category" v-loading="menuLoading">
            <div class="category-item">
                <span class="title">方向：</span>
                <ul class="items">
                    <li class="item" v-for="item, index in menu.directionList" :key="index"
                        :class="[directionActive == index ? 'item-on' : '']"
                        @click="directionActive = index, form.direction = item.id">
                        <el-link :underline="false">{{ item.content }}</el-link>
                    </li>
                </ul>
            </div>
            <div class="category-item">
                <span class="title">分类：</span>
                <ul class="items">
                    <li class="item" v-for="item, index in menu.categoryList" :key="index"
                        :class="[categoryActive == index ? 'item-on' : '']"
                        @click="categoryActive = index, form.category = item.id">
                        <el-link :underline="false">{{ item.content }}</el-link>
                    </li>

                </ul>
            </div>
            <div class="category-item mt50">
                <span class="title">难度：</span>
                <ul class="items">
                    <li class="item" v-for="item, index in difficultyList" :key="index"
                        :class="[difficultyActive == index ? 'item-on' : '']"
                        @click="difficultyActive = index, form.difficulty = item.id">
                        <el-link :underline="false">{{ item.content }}</el-link>
                    </li>
                </ul>
            </div>
            <div class="category-item">
                <span class="title">类型：</span>
                <ul class="items">
                    <li class="item" v-for="item, index in typeList" :key="index"
                        :class="[typeActive == index ? 'item-on' : '']" @click="typeActive = index, form.type = item.id">
                        <el-link :underline="false">{{ item.content }}</el-link>
                    </li>
                </ul>
            </div>
        </div>
        <el-divider></el-divider>
        <div>
            <div class="course-sort">
                <ul class="sort-list">
                    <li class="sort-on">最新</li>
                    <li>最热</li>
                </ul>
            </div>
            <div class="container" v-loading="courseLoading">
                <el-card class="course-item" v-for="item, index in courseList" :key="index"
                 shadow="hover" @click.native="toDetail(item.id)">
                    <div>
                        <el-image :src="item.coverImage"></el-image>
                    </div>
                    <p class="course-title">{{ item.title }}</p>
                    <p class="one">{{ item.type == 1 ? '初阶' : (item.type == 2 ? '进阶' : '高阶') }} · {{ item.peopleNum }}人报名
                    </p>
                    <div class="box-end clearfix">
                        <span class="price">￥{{ item.price }}</span>
                        <el-link icon="el-icon-shopping-cart-2">加入购物车</el-link>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script>
import { reqMenu, reqCoursePage } from '@/api/course'

export default {
    name: "course",
    data() {
        return {
            menu: {},
            form: {},
            courseList: [],
            directionActive: 0,
            categoryActive: 0,
            difficultyActive: 0,
            typeActive: 0,
            // 是否加载
            menuLoading: false,
            courseLoading: false,
            // 搜索内容
            searchContent: null,
            currPage: 1,
            pageSize: 16,
            totalPage: 0,
            // 模拟数据
            difficultyList: [
                {
                    id: 0,
                    content: '全部'
                },
                {
                    id: 1,
                    content: '初阶'
                },
                {
                    id: 2,
                    content: '进阶'
                },
                {
                    id: 3,
                    content: '高阶'
                }
            ],
            typeList: [
                {
                    id: 0,
                    content: '全部'
                },
                {
                    id: 2,
                    content: '免费'
                },
                {
                    id: 1,
                    content: "收费"
                }
            ]

        };
    },
    mounted() {
        this.getMenu();
        this.search();
    },
    methods: {
        getMenu() {
            this.menuLoading = true
            reqMenu().then((res) => {
                res.data.categoryList.unshift({ id: 0, content: '全部' });
                res.data.directionList.unshift({ id: 0, content: '全部' });
                this.menu = res.data;
                this.menuLoading = false
            }).catch((error) => {
                this.menuLoading = false
                console.log(error)
            })
        },
        search() {
            this.courseLoading = true
            reqCoursePage({
                currPage: this.currPage,
                pageSize: this.pageSize,
                isCharge: this.form.type == 0 ? null : this.form.type,
                direction: this.form.direction == 0 ? null : this.form.direction,
                type: this.form.difficulty == 0 ? null : this.form.difficulty,
                category: this.form.category == 0 ? null : this.form.category
            }).then((res) => {
                this.courseList = res.data.list;
                this.totalPage = res.data.totalCount
                this.courseLoading = false
            }).catch((error) => {
                this.courseLoading = false
                this.$message.error(error.message)
            })
        },
        toDetail(id){
            this.$router.push("/course/" + id);
        }
    },
    watch: {
        directionActive() {
            this.search();
        },
        categoryActive() {
            this.search();
        },
        difficultyActive() {
            this.search();
        },
        typeActive() {
            this.search();
        },
    }
}
</script>

<style scoped>
.course-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: gray;
}

.top-left {
    display: flex;
    align-items: center;
}

.category-item {
    display: flex;
    align-items: center;
    margin: 15px 0;
}

.items {
    clear: both;
    padding-left: 0;
    list-style: none;
    flex: 1;
    height: 32px;
    line-height: 32px;
}

.item {
    float: left;
    padding: 0 8px;
    font-size: 16px;
}

.title {
    font-weight: 700;
}

.mt50 {
    margin-top: 45px;
}

.course-sort {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
}

.course-sort ul {
    list-style: none;
    padding-left: 0;
}

.course-sort li {
    float: left;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 12px;
    margin-right: 10px;
}

.sort-on {
    color: white;
    background-color: #545c63;
}


.container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}

.course-item {
    cursor: pointer;
    background-color: #fff;
    flex: 0 0 calc(25% - 10px);
    margin-bottom: 10px;
}

.course-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #545c63;
    line-height: 20px;
    height: 40px;
    margin-bottom: 8px;
    padding: 0 8px;
}

.course-item .one {
    font-size: 12px;
    color: #9199a1;
    line-height: 18px;
    padding: 0 8px;
    margin-bottom: 8px;
}

.box-end {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
}

.price {
    color: #f01414;
}

.category-item .item-on {
    background: rgba(242, 13, 13, .06);
    color: #f20d0d;
    font-weight: 700 !important;
    border-radius: 8px;
}
</style>